<template>
  <div class="h-full w-full overflow-hidden">
    <Echart
      :loading="!hotoption"
      :option="hotoption"
      :events="[
        ['legendselectchanged',e=>{
          const { selected,name } = e
          $log((selected[name]?'显示':'隐藏')+name)
        }],
        ['click',e=>{
          $log(hotoption)
        }]
      ]"
      :style="{height:titleHeight}"
    />
    <div class="grid grid-cols-3 grid-rows-2" :style="{height:`calc(100% - ${titleHeight})`}">
      <Echart
        :loading="!lineoption"
        :option="lineoption"
        class="col-span-2"
      />
      <div class="overflow-y-scroll row-span-2">
        <el-steps direction="vertical" :active="9999">
          <el-step 
          v-for="item in logs" 
          :key="'step-'+item.id" 
          :title="`${item.time}-${item.name}-${item.ip}-${item.result?'登录成功':'登录失败'}`" />
        </el-steps>
      </div>
      <Echart
        :loading="!ctline"
        :option="ctline"
        class="col-span-2"
      />
    </div>
  </div>
</template>

<script lang="ts" setup >
import { getStora } from '@/utils/localstore'
import { reactive,readonly,h } from 'vue'
import { createComponent } from 'echarts-for-vue';
import { hotoption,lineoption,ctline } from './static/homepage'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus';
const titleHeight = '300px'
const Echart = createComponent({echarts,h})
const logs = readonly(getStora('SRC_LOGS'))


</script>


<style lang="scss" scoped>
</style>